<template>
    <div class="box-group-wrap" style="padding-bottom: 0;">
        <p class="title">客户用卡情况</p>
        <!-- <div class="line"></div> -->
        <div v-if="!isCardInfo3004" class="nodatalist" style="padding-bottom: 10px;">
            <img src="@/assets/img/khindex/nuMessage.png" alt width="40px" />
            <p>暂无客户用卡信息</p>
        </div>
        <div v-else style="text-align: left;margin-top: 10px;">
            <div class="contentMain">
                <el-row>
                    <el-col :span="20">
                        <p>
                            <span>近半年月均账单金额：</span>
                            <span class="text">{{stmtamtavg}}</span>
                        </p>
                    </el-col>
                    <el-col :span="20">
                        <p>
                            <span>近半年月均额度占用率：</span>
                            <span class="text">{{limitused+'%'}}</span>
                        </p>
                    </el-col>
                    <el-col :span="20">
                        <p>
                            <span>近半年笔均消费金额：</span>
                            <span class="text">{{puramtavg}}</span>
                        </p>
                    </el-col>
                    <el-col :span="20">
                        <p>
                            <span>近一年分期办理次数：</span>
                            <span class="text">{{mpappnum}}</span>
                        </p>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import moment from 'moment';
import { mapGetters } from 'vuex';
import { isEmptyObject } from '@/utils/Object';

export default {
    name: 'custinfos',
    props: {
        mpappnum: {
            type: Number,
            default: 0,
        }
    },
    data() {
        return {
            labelValueList: [],
            accountTitleData: {},
            colorList: ['#e9e7ef', '#fffbf0', '#f0f0f4', '#fcefe8', '#e9f1f6', '#e0eee8', '#c0ebd7', '#70f3ff', '#ffb3a7', '#edd1d8', '#a4e2c6', '#eedeb0', '#bbcdc5', '#a1afc9', '#e9e7ef', '#fffbf0', '#f0f0f4', '#fcefe8', '#e9f1f6', '#e0eee8', '#c0ebd7'],
            // iscustomerInfo_3002_CUSTID:this.$store.getters.customerInfo_3002||'',
            stmtamtavg: 0.0,//近半年月均账单金额=（半年内每期账单求和）/6；
            limitused: 0.0,//近半年月均额度占用率=近半年月平均账单金额/信用额度*100%；
            puramtavg: 0.0,//近半年笔均消费金额=近半年消费总额/消费笔数
            // mpappnum: '0',//近一年分期办理次数，分付款交易明细可以查询统计

            NEXTDAY_3077: moment(new Date(new Date().getTime() - (1000 * 60 * 60 * 24 * 365))).format('YYYYMMDD'),//翻页交易日期
            NEXTMPNO_3077: '',//翻页分期付款序号
            RtnindFlag: '',//翻页标志
            startDate: moment(new Date(new Date().getTime() - (1000 * 60 * 60 * 24 * 365))).format('YYYYMMDD'), // 开始日期
            endDate: moment(new Date()).format('YYYYMMDD'), // 结束日期 默认为当前日期

        };
    },
    // 取缓存信息
    computed: {
        ...mapGetters([
            'cardInfo_3004',
            'customerInfo_3002',
            'CreditCardHistory_3054',
            'defaultParams',
            'globalVariable'
        ]),
        isCardInfo3004() {
            if (this.globalVariable.isCoilIn) {
                console.log("用卡情况初始方法**********");
                this.getInitData();
                return true;
            } else {
                return false;
            }
        },
    },
    mounted() {
        // this.getCustLabel();
    },
    methods: {
        // 获取客户标签数据
        getInitData() {
            console.log("客户用卡情况查了几次呀");
            //查询计算账单平均值 、额度利用率、近半年笔均消费金额
            console.log("3054list", this.CreditCardHistory_3054);
            //计算半年月均账单金额
            if (this.CreditCardHistory_3054.dataList !== undefined && this.CreditCardHistory_3054.dataList.length > 0) {
                let stmtamt = 0;//账单金额
                let purchamt = 0;//消费金额
                let purchnum = 0;//消费笔数
                for (let i = 0; i < this.CreditCardHistory_3054.dataList.length; i++) {
                    if (this.CreditCardHistory_3054.dataList[i].BALFLAG != '-') {
                        stmtamt = parseFloat(stmtamt) + parseFloat(this.CreditCardHistory_3054.dataList[i].CLOSEBAL);
                    } else {
                        stmtamt = parseFloat(stmtamt) + 0;
                    }
                    purchamt = parseFloat(purchamt) + parseFloat(this.CreditCardHistory_3054.dataList[i].PURCH);
                    purchnum = parseInt(purchnum) + parseInt(this.CreditCardHistory_3054.dataList[i].PURCHNBR);
                }

                console.log("stmtamt:" + stmtamt + ",purchamt:" + purchamt + ",purchnum:" + purchnum);

                this.stmtamtavg = parseFloat(stmtamt / 6).toFixed(2);
                this.limitused = (parseFloat(this.stmtamtavg * 100) / parseFloat(this.customerInfo_3002.SUMCRED)).toFixed(2);
                this.puramtavg = parseFloat(purchamt / purchnum).toFixed(2);

                console.log("this.customerInfo_3002.CREDITLIMIT:", this.customerInfo_3002.SUMCRED);

                console.log("this.stmtamtavg:" + this.stmtamtavg + ",this.limitused:" + this.limitused + ",this.puramtavg:" + this.puramtavg);

            }

        },
    },
};
</script>

<style lang="scss" scoped>
.box-group-wrap {
    .tagItem {
        display: inline-block;
        border-radius: 5px;
        color: #333;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        box-sizing: border-box;

        .el-button {
            height: 100%;
            width: 100%;
            padding: 0;
            background-color: rgba(255, 255, 255, 0);
            border: none;
            font-size: 12px;
        }
        span.content {
            border-radius: 5px;
            font-size: 12px;
        }
    }
    .contentMain {
        padding: 5px 10px;
        p {
            font-size: 12px;
            line-height: 24px;
        }
        p.btmstyle {
            span {
                display: inline-block;
                margin: 0 6px 6px 0;
                background-color: #7196eb;
                color: #fff;
            }
        }
        span.content {
            border-radius: 5px;
        }
    }
}
</style>
